<template>
	<div>
		<city-header></city-header>	
	    <city-search :cities="cities"></city-search>	
        <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
        <city-alphabet @change="handleLetterChange" :cities="cities"></city-alphabet>
	</div>
		
</template>

<script>
    import axios from 'axios'
    import CityHeader from './components/Header'
    import CitySearch from './components/Search'
    import CityList from './components/List'
    import CityAlphabet from './components/Alphabet'
	export default{
         name:'City',
         components:{
             CityHeader,
             CitySearch,
             CityList,
             CityAlphabet
         },
         methods:{
             getCityInfo(){
                 axios.get('/api/city.json')
                      .then(this.handleGetCityInfoSucc)
             },
             handleGetCityInfoSucc(res){
                 // console.log(res)
                 res=res.data
                 if(res.ret&&res.data){
                    const data=res.data;
                    console.log(data)
                    this.cities=data.cities
                    this.hotCities=data.hotCities
                 }
             },
             handleLetterChange(letter){
                this.letter=letter
             }
         },
         mounted(){
             this.getCityInfo()
         },
         data () {
         	return {
                cities:{},
                hotCities:[],
                letter:''
         	}
         }
	}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
 


	

</style>